<template>
  <div class="loan-application-container">
    <div class="title">
      Application Result
    </div>

    <div class="application-resules-info">
      <a-icon
        type="check-circle"
        theme="filled"
        class="check-circle"
      />

      <div class="text-container">
        <div class="title">
          The repayment is successful, please pay attention to the SMS notification!
        </div>
      </div>
    </div>

    <div class="button-container">
      <a-button
        type="primary"
        size="large"
        block
        @click="handlerPage"
      >
        返回首页
      </a-button>
    </div>
  </div>
</template>

<script>

export default {
  methods: {
    handlerPage() {
      this.$router.push({
        path: '/'
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.loan-application-container {
  background-color: $white;
  padding-top: 48px;
  padding-bottom: 200px;
  & > .title {
    text-align: center;
    font-size: 40px;
    margin: $margin-md 0;
    font-weight: bold;
  }

  .application-resules-info {
    background: rgba(56, 125, 255, 0.03);
    border: 1px solid $gray-18;
    padding: 30px 70px;
    padding-top: 116px;
    text-align: center;

   .check-circle {
      font-size: 110px;
      color: $theme-color;
    }
    .text-container {
      margin-top: $margin-lg;

      .title {
        font-weight: bold;
        font-size: $font-size-lg;
      }

      .desc {
        margin-top: $margin-xs;
      }
    }
  }

  .button-container {
    width: 420px;
    margin: $margin-lg auto 0 auto;
  }
}
</style>
